import React, { useState } from 'react';
import { observer } from 'mobx-react';
import { Button, Input, Tooltip, Typography } from 'antd';
import { DownOutlined, PlusOutlined, UpOutlined } from '@ant-design/icons';
import { Action, SearchForm, TableCard } from '@/components';
import { navigate } from 'libs';
import ExpandedTable from './ExpandedTable'
import store from './store';
import dayjs from 'dayjs';

export default observer(function () {
  const [openMoreIds, setOpenMoreIds] = useState([]);
  const columns = [
    {
      title: '公司名称',
      dataIndex: 'name',
      width: '20%',
      render: txt => <b style={{ color: '#2F4C77' }}>{txt}</b>
    }, {
      title: '主要飞机',
      dataIndex: 'main_aircraft',
    }, {
      title: '账号',
      dataIndex: 'customer_user',
    }, {
      title: '账户类型',
      hide: true,
      render: text => <Typography.Text type={text['is_valid'] ? 'success' : ''} disabled={!text['is_valid']}>{text['is_valid'] ? '正式账户' : '测试账户'}</Typography.Text>
    }, {
      title: '开设时间',
      dataIndex: 'created_at'
    }, {
      title: '到期日期',
      render: info => !info.is_valid ? dayjs(info.expired_date).isBefore(dayjs()) ? (
          <Tooltip title='已过期' color='red'><Typography.Text type='danger'>{info.expired_date}</Typography.Text></Tooltip>
        ) : dayjs(info.expired_date).isAfter(dayjs().add('3', 'months')) ? (
          info.expired_date
        ) : <Tooltip title='即将到期' color='yellow'><Typography.Text type='warning'>{info.expired_date}</Typography.Text></Tooltip>
        : null
    }, {
      title: '飞机数量',
      dataIndex: 'aircraft_count'
    }, {
      title: '操作',
      width: 110,
      className: 'brd-r',
      render: record => (
        <Action>
          <Action.Button onClick={() => store.showForm(record)}>编辑</Action.Button>

          {
            openMoreIds.includes(record.id) ? (
              <Action.Button onClick={() => openMore(record.id, false)}>
                详情<UpOutlined style={{ margin: 2 }} />
              </Action.Button>
            ) : (
              <Action.Button onClick={() => openMore(record.id, true)}>
                详情<DownOutlined style={{ marginLeft: 2 }} />
              </Action.Button>
            )
          }
        </Action>
      )
    },
  ]

  //展开详情||收起详情
  function openMore(id, isOpen) {
    let arr = [...openMoreIds]
    if (isOpen) {
      arr.push(id)
    } else {
      arr = arr.filter(v => v !== id)
    }
    setOpenMoreIds([...arr])
  }


  return (
    <TableCard
      bordered
      title={
        <SearchForm>
          <SearchForm.Item span={8} title="搜索">
            <Input allowClear
                   onPressEnter={() => store.fetchRecords()}
                   value={store.f_name}
                   onChange={store.eSet('f_name')}
                   style={{ maxWidth: 200 }}
                   placeholder="请输入公司或账号名称" />
          </SearchForm.Item>
        </SearchForm>
      }
      rowKey="id"
      sticky
      rowClassName={(record, index) => openMoreIds.includes(record.id) ? 'expanded-row-self' : ''}
      loading={store.fetching}
      dataSource={store.dataSource}
      columns={columns}
      expandable={{
        expandedRowClassName: () => 'expanded-row',
        showExpandColumn: false,
        expandedRowKeys: openMoreIds,
        expandedRowRender: (record) => <ExpandedTable record={record} />,
      }}
      pagination={false}
      // pagination={{
      //   showSizeChanger: true,
      //   showLessItems: true,
      //   hideOnSinglePage: true,
      //   pageSizeOptions: ['10', '20', '50', '100']
      // }}
      onReload={store.fetchRecords}
      actions={[
        <Button type="primary" icon={<PlusOutlined />} onClick={() => store.showForm()}>新建</Button>,
      ]}
    />
  )
})
